<template>
  <div class="home">
    {{reverseMsg}}
    {{reverseMsg}}
    {{reverseMsg}}
    {{reverseMsg}}
    <br>
    <br>
    <button @click="str = 'mssage'">修改str</button>
    {{str}}
    <br>
    <br>
    <button @click="changeName">修改用户名</button>
  </div>
</template>

<script setup>
  import { computed, ref, watch, reactive, watchEffect } from 'vue'
  let msg = ref("画上荷花和尚画")
  let str = ref('msg')
  // const color = ref('red')
  let obj = reactive({
    name: "张三"
  })
  let reverseMsg = computed(() => msg.value.split('').reverse().join(""))
  // watch(str, (newValue, oldValue) => {
  //   console.log(newValue, oldValue);
  // })
  let changeName = (params) => {
    obj.name = '李四'
    msg.value = "message"
    str.value = "hello world"
  }
  // 当前版本下watch可以直接监听引用数据类型
  // watch(obj, (newValue, oldValue) => {
  //   console.log(newValue, oldValue);
  // })
  // 他和watch一样都可监听数据的变化 不过watchEffect可以监听依赖的数据发生的变化
  // watchEffect((val) => {
  //   console.log(val);
  // }) 

  // watch(() => obj.name, (newValue) => {
  //   console.log(newValue);
  // })
  // watch可以同时监听多个数据的变化当签版本无需深度监听
  watch([msg, str], ([newMsg, newStr], [oldMsg, oldStr]) => {
    // console.log(newMsg, oldMsg);
    // console.log(newStr, oldStr)
  })
</script>





